<div id="home" class="page">
	<h3>
		Optimize Queries
		<span>Follow the steps to see how a DBMS optimizes a query</span>
	</h3>
	<div>
		<div id="SQL_editor">
			<h6>0.) Insert SQL Query</h6>
			<div>
				<div class="tab_content">
					<ul class="step_tabs">
						<li title="avail_tbls" onclick="tabs(this);">Table Schemas</li>
						<li title="sql_examples" onclick="tabs(this);">Example Queries</li>
					</ul>
					<div id="avail_tbls">
						<ul>
						<% for table in @list_of_tables %>
							<li><%= printColumns( table.TABLE_NAME ) %></li>
						<% end %>
						</ul>
					</div>
					<div id="sql_examples">
						<p>Click an example to add it to the query box.</p>
						<ul>
							<li onclick="addToForm('query',this);">SELECT Dname, Fname, Lname FROM Departments, Employees, Works_Ons WHERE Dno=Dnumber AND Essn=Ssn</li>
							<li onclick="addToForm('query',this);">SELECT Fname, Lname, Hours FROM Employees, Works_ons WHERE Essn=Ssn</li>
							<li onclick="addToForm('query',this);">SELECT Pname, Dname FROM Departments, Projects WHERE Dnum=Dnumber</li>
						</ul>
					</div>
				</div>
				<% remote_form_for :pq, @pq, :url => { :action => :translate }, :loading => "loading();", :complete => 'makeTree(request.responseXML,"parsed_query");new Effect.BlindDown("Parsed_syntax",{duration:0.5});new Effect.Highlight("Parsed_syntax",{});loading();' do |f| %>
					<%= text_area_tag :query, nil, :class => 'code' %>
					<%= submit_tag "Get started!", :onclick => 'restart(this);' %>
				<% end %>
			</div>
		</div>
		<div id="Parsed_syntax" style="display:none">
			<h6>1.) Parsed Syntax</h6>
			<div id="parsed_query">
				Your query will appear here...
			</div>
		</div>
		<div id="step_three" style="display:none">
			<h6>2.) Break Up Selects</h6>
			<div id="broken_selects">
				The result appears here...
			</div>
		</div>
		<div id="step_four" style="display:none">
			<h6>3.) Order Joins</h6>
			<div id="join_ordered">
				The result appears here...
			</div>
		</div>
		<div id="step_five" style="display:none">
			<h6>4.) Merge Selects and Joins</h6>
			<div id="merged_joins">
				The result appears here...
			</div>
		</div>
		<div id="step_six" style="display:none">
			<h6>5.) Push Projects</h6>
			<div id="pushed_projects">
				The result appears here...
			</div>
		</div>
		<div id="step_seven" style="display:none">
			<h6>6.) Determine Table Scans</h6>
			<div id="scaned_tables">
				The result appears here...
			</div>
		</div>
		<div id="step_eight" style="display:none">
			<h6>7.) Determine Join Methods</h6>
			<div id="scaned_joins">
				The result appears here...
			</div>
		</div>
	</div>
	<div class="footer">
		<%= link_to "Getting errors? You may have found our limitations...", "http://code.google.com/p/querytranslatortool/wiki/Limitations" -%>
	</div>
</div>